<template>
  <div class="forgetMain">
    <reg-top></reg-top>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_phone.png" class="img">
      <input type="text" class="username" v-model="forgetData.phone" placeholder="请输入手机号码" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_code.png" class="img">
      <input type="text" class="pwd" v-model="forgetData.code" placeholder="输入验证码" autocomplete="new-password">
      <div class="code_btn">
        <box>
          <x-button :type="codeStatus.codeType" @click="getForgetCode" :disabled="codeStatus.disabled">{{codeStatus.codeTitle}}</x-button>
        </box>
      </div>
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_key.png" class="img">
      <input type="password" class="pwd" v-model="forgetData.pwd1" placeholder="请输入新密码" autocomplete="new-password">
    </div>
    <div class="input-box">
      <img src="http://static.52letsgo.cn/zz/wechatimg/ic_login_key.png" class="img">
      <input type="password" class="pwd" v-model="forgetData.pwd2" placeholder="请再次输入密码" autocomplete="new-password">
    </div>
    <box class="login-bottom-wrapper">
      <x-button type="warn" @click="forgetPwd">提交</x-button>
    </box>
  </div>
</template>
<script>
import { XInput, Group, XButton, Box } from './../../components'
import regTop from './../components/login/regTop'

var MyRequest = require('./../../commons/js/MyRequest.js')
var Global = require("./../../commons/js/Global.js")
export default {
  props: {
  },
  data () {
    return {
      forgetData: {
        phone: "",
        pwd1: "",
        pwd2: "",
        code: "",
      },
      codeStatus: {
        disabled: false,
        codeType: 'warn',
        codeTitle: "获取验证码",
        time: 60
      }
    }
  },
  components: {
    XInput,
    Group,
    XButton,
    Box,
    regTop
  },
  created: function() {
      Global.closeLoading()
    },
  methods: {
    forgetPwd () {
      if(this.forgetData.pwd1 != this.forgetData.pwd2) {
        Global.showToast('两次密码不一致', this);
        return
      }
      var data = {
        action: "resetPass2",
        mobile: this.forgetData.phone,
        password: this.forgetData.pwd1,
        code: this.forgetData.code
      }
      MyRequest.MyGetWithToast("ChangePwd", this, function(result, that) {
        console.log(result)
        if(!result.success) {
          Global.showToast(result.msg, that)
          return
        }
        history.go(-1)
      }, data)
    },
    getForgetCode () {
      if(!(/^1[34578]\d{9}$/.test(this.forgetData.phone))) {
          Global.showToast('请检查手机号格式', this)
          return; 
      } 
      var data = {
        action: "findCode2",
        mobile: this.forgetData.phone,
      }
      MyRequest.MyGetWithToast("findCode", this, function (result, that) {
        console.log(result)
        if(!result.success) {
          Global.showToast(result.msg, that)
          return;
        }
        //开一个定时器
        that.codeStatus = {
          disabled: true,
          codeType: 'default',
          codeTitle: "60",
          time: 60
        }
        var t = setInterval(function () {
          that.codeStatus.codeTitle = --that.codeStatus.time;
          if (that.codeStatus.time <= 0) {
            clearInterval(t);
            that.codeStatus = {
              disabled: false,
              codeType: 'warn',
              codeTitle: "获取验证码",
              time: 60
            }
          }
        }, 1000)
      }, data)
    }
  }
}
</script>
<style>
  .forgetMain {
    position: relative;
    width: 100%;
  }
  .forgetMain .input-box {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid #e5e5e5;
  }
  .forgetMain .input-box .img {
    width: 2.4rem;
    height: 2.4rem;
    padding-top: 3px;
  }
  .forgetMain .input-box input {
    flex: 7;
    border: 0;
    outline: none;
    padding-left: 1rem;
    background-color: #fff;
    font-family: "微软雅黑";
    height: 2.4rem;
    font-size: 1.4rem;
    padding-top: 3px;
  }
  .forgetMain .input-box .code_btn {
    flex: 3;
  }
   .forgetMain .input-box .code_btn .weui_btn {
     padding-left: 0;
     padding-right: 0;  
   }
  .forgetMain .input-box .code_btn button {
    font-size: 1.3rem;
    font-family: "微软雅黑";
  }
  .forgetMain .input-box .birthday_select {
    flex: 1;
    padding: 0;
  }
  .forgetMain .input-box .birthday_select:before {
    border-top: 0;
  }
  .dp-header .dp-item {
    color: orange;
  }

</style>